<template>
    <div class="notice-bar-box">
        <div class="notice-bar">
            <!-- <div class="notice-list" v-for="(item, index) in data" :style="{ color: filterColor(item.type) }" :key="index">
        {{ item.content }}
      </div>
       -->
            <div class="notice-list" style="color: #e6a23c;">
                警告来自{{ message.address }}区域，发生{{ message.device_remark }}异常，请派人前往查看
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    message: Object,
})

const filterColor = (type) => {
    switch (type) {
        case 'primary':
            return '#409eff'
        case 'success':
            return '#67c23a'
        case 'warning':
            return '#e6a23c'
        case 'danger':
            return '#f56c6c'
        default:
            return '#ffffff'
    }
}
</script>
<style lang="scss" scoped>
.notice-bar-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: right;
    flex: 1;
    overflow: hidden;

    .notice-bar {
        display: flex;
        flex-direction: row;
        font-size: 20px;
        padding-left: 100%;
        word-break: keep-all;
        white-space: nowrap;
        animation: loop-animation 100s linear infinite both;

        @keyframes loop-animation {
            0% {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }

            100% {
                -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
            }
        }

        .notice-list {
            margin-right: 50px;
        }
    }
}
</style>
